import { State } from "../core/state";
import { Signal } from "../core/utils/signal";
import { copyObj, handlerInputKeyup, makeDiv } from "../core/utils/utils";
import handler from "../editor/handler";
import util from "../editor/util";
import line from "../editor/line";
import node from "../editor/node";
import npc from "../editor/npc";
import render from "../editor/render";
import good from "../editor/good";
import mapSite from "../editor/mapSite";
import mapData from '../game/maps/defines/map.json'
import { decompressX64 } from "../core/utils/lzstring";
import { compressionPrefix } from "../core/utils/read_write_proxy";

export class MapEditorState extends State{
  constructor(){
    super('MapEditorState')

    this.mixin([handler, line, util, render, node, npc, mapSite, good])
  }

  getInnerHTML(){
    return `
      <header>
        <div class="logo">游戏内容编辑器v1.0</div>
        <div class="site">世界/丰华村[0, 1]</div>
        <div class="control">
          <button class="homeButton" title="前往首页"><img src="res/ui/icons/home.svg" /></button>
          <button class="bookButton" title="手册"><img src="res/ui/icons/book.svg" /></button>
          <button class="resetButton" title="重置数据"><img src="res/ui/icons/reset.svg" /></button>
          <button class="mapButton" title="渲染世界"><img src="res/ui/icons/map.svg" /></button>
          <button class="saveButton" title="保存数据"><img src="res/ui/icons/save.svg" /></button>
        </div>
      </header>

      <div class="editor-content">
        <p class="tip"></p>

        <div class="control-panel">
          <h2>地图版本</h2>
          <input id="mapVersionInput" type="text" />
          
          <h2>地区属性编辑</h2>
          <div class="mapClip remove">
            <h3>地区名称</h3>
            <input id="worldNameInput" type="text" />
            <h3>地区描述</h3>
            <input id="worldDescInput" type="text" />
          </div>

          <h2>辅助按钮</h2>
          <button class="styledButton closeEditMode">结束编辑模式</button>
        </div>
        <div class="map-wrapper">
          <div class="map">
            <svg class="map-line"></svg>
            <div class="map-arrow"></div>
            <div class="map-content"></div>
          </div>
        </div>
        <div class="attr-panel">
          <div class="select-page-btn">
          </div>

          <div class="pos-page page">
            <h2>地址定位</h2>
            <div class="site-list"></div>
          </div>

          <div class="mapSite-attr-page page">
            <h2>地板内容编辑</h2>

            <div class="mapSiteAttr remove">
              <h3>地板类型</h3>
              <div id="mapKeyInput" class="enum">xxx</div>

              <h3>可前往区域</h3>
              <div class="nextSites">

              </div>
              <button class="styledButton create1Next">创建单链接</button>
              <button class="styledButton create2Next">创建双链接</button>

              <h3>可前往地图块</h3>
              <div class="nextMapClip styledButton success">
                <p>世界地址: <span class="worldPos">无</span></p>
                <p>区域地址: <span class="mapPos">无</span></p>
              </div>
              <button class="styledButton removeGoMapClip mt-1">移除地图块指向</button>
            </div>
          </div>

          <div class="npc-page page">
            <h3>固有Npc编辑</h3>
            <div class="mapSiteNpcs">
            </div>
            <button class="styledButton addNpc">添加新的Npc</button>
          </div>

          <div class="create-npc-page page">
            <h3>动态Npc编辑</h3>
            <div class="mapSiteNpcs">
            </div>
            <button class="styledButton addMNpc">添加新的Npc</button>
          </div>

          <div class="good-page page">
            <h3>固有Good编辑</h3>
            <div class="mapSiteGoods">
            </div>
            <button class="styledButton addGood">添加新的Good</button>
          </div>

          <div class="create-good-page page">
            <h3>动态Good编辑</h3>
            <div class="mapSiteGoods">
              <div class="styledButton success mb-1">
                <p>ID: 1</p>
              </div>
            </div>
            <button class="styledButton addMGood">添加新的Good</button>
          </div>
        </div>
      </div>
      
      <div class="point"></div>
      <div class="rightmenu">
        <div class="btn createNode">创建节点</div>
        <div class="btn directCreateNode">直接创建节点</div>
        <div class="btn deleteNode">删除节点</div>
        <div class="btn directDeleteNode">直接删除节点</div>
      </div>
    `
  }

  onEnter() {
    this.moveX = 0;
    this.moveY = 0;
    this.scale = 1;

    this.mapData = copyObj(JSON.parse(decompressX64(mapData.data)));
    this.mapClip = null;
    this.mapSite = null;

    this.storeId = this.getMaxStoreId();

    this.editMode = false;
    this.mEditMode = false;
    this.editSignal = new Signal();

    this.currentPos = [0, 0];

    this.lines = [];
    this.activeMaps = [];
    
    this.renderView();
    this.renderSelectBtn();

    this.handlerRightmenu();
    this.handlerButtonCallback();
    this.handlerInput();
    this.handlerMapMove();
  }

  getHasUnloadConfirmation(){
    return true;
  }
}